<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
<!--main content start-->

<section id="main-content" class="page03 project-list">
  <section class="intro">
    <div class="inner">
      <div class="text">
        <h1>Checklist edit options</h1>
        <p>Add and update your requirements!</p>
      </div>
      <button style="float:right; margin-left:4px;" (click)="back()" class="btn btn-green" id="back-button"><i
          class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
      <button style="float:right;" (click)="newChecklistItemModal(modalValue)" id="add-new-checklist-item"
        class="btn btn-default"><i class="fa fa-cog" aria-hidden="true"></i>
        Add new checklist item</button>
    </div>
  </section>
  <section class="wrapper" style="margin-top:0px;">
    <div class="row mt">
      <div class="col-lg-12">

        <div *ngIf="isSubmitted && formControls.checklist_id.errors" class="help-block">
          <div *ngIf="formControls.checklist_id.errors.required">
            <ngb-alert type="danger" [dismissible]="false">
              Checklist id was not filled in 
            </ngb-alert>
          </div>
          <div *ngIf="formControls.checklist_id.errors.pattern">
              <ngb-alert type="danger" [dismissible]="false">
                Checklist id was not confirm standard 'number.number' (1.1, 2.1, 3.0, etv)
              </ngb-alert>
            </div>
        </div>

        <div *ngIf="isSubmitted && formControls.content.errors" class="help-block">
          <div *ngIf="formControls.content.errors.required">
            <ngb-alert type="danger" [dismissible]="false">
              Content was not filled in
            </ngb-alert>
          </div>
        </div>

        <div *ngIf="isSubmitted && formControls.kb_id.errors" class="help-block">
          <div *ngIf="formControls.kb_id.errors.required">
            <ngb-alert type="danger" [dismissible]="false">
              Knowledgebase id description was not selected
            </ngb-alert>
          </div>
        </div>

        <div *ngIf="isSubmitted && formControls.question_id.errors" class="help-block">
          <div *ngIf="formControls.question_id.required">
            <ngb-alert type="danger" [dismissible]="false">
              Question  was not selected
            </ngb-alert>
          </div>
        </div>

        <div *ngIf="isSubmitted && formControls.cwe.errors" class="help-block">
          <div *ngIf="formControls.cwe.errors.required">
            <ngb-alert type="danger" [dismissible]="false">
              CWE id  was not filled in
            </ngb-alert>
          </div>
          <div *ngIf="formControls.cwe.errors.pattern">
              <ngb-alert type="danger" [dismissible]="false">
                CWE needs to be a numeric value
              </ngb-alert>
            </div>
        </div>

        <div *ngIf="isSubmitted && formControls.maturity.errors" class="help-block">
          <div *ngIf="formControls.maturity.errors.required">
            <ngb-alert type="danger" [dismissible]="false">
              Maturity level  was not filled in
            </ngb-alert>
          </div>
          <div *ngIf="formControls.cwe.errors.pattern">
              <ngb-alert type="danger" [dismissible]="false">
                Maturity needs to be a numeric value
              </ngb-alert>
            </div>
        </div>



        <ngb-accordion [closeOthers]="true" #acc="ngbAccordion">
          <div *ngFor="let item of checklist; let myIndex = index;">
            <ngb-panel title="{{item.checklist_items_checklist_id}} {{item.checklist_items_content}}">
              <ng-template ngbPanelContent>

                <!-- Here starts showing of the checklist items content-->
                <div>

                  <table style="table-layout: fixed;" class="table table-striped table-advance table-hover">
                    <thead style="background-color:white;">
                      <tr>
                        <th style="background-color:white; color:black">checklist_id</th>
                        <th style="background-color:white;color:black">checklist Item</th>
                        <th style="background-color:white;color:black">Question</th>
                        <th style="background-color:white;color:black">Kb item</th>
                        <th style="background-color:white;color:black">Include always</th>
                        <th style="background-color:white;color:black">CWE</th>
                        <th style="background-color:white;color:black">Maturity level</th>
                        <th style="background-color:white;color:black">Edit</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{item.checklist_items_checklist_id}}</td>
                        <td><button type="button" class="btn btn-theme03" placement="top"
                            ngbTooltip="{{item.checklist_items_content}}">show</button></td>
                        <td>
                          <span *ngFor="let question of questions">
                            <button *ngIf="question.id === item.question_id" type="button" class="btn btn-theme03"
                              placement="top" ngbTooltip="{{question.question}}">show</button>
                          </span>
                        </td>
                        <td><button type="button" class="btn btn-theme03" placement="top"
                            ngbTooltip="{{item.kb_item_title}}">show</button></td>
                        <td>{{item.include_always}}</td>
                        <td>{{item.cwe}}</td>
                        <td>{{item.maturity}}</td>
                        <td>
                          <a [routerLink]="['/checklist-edit', item.checklist_items_checklist_id]">
                            <button class="btn btn-success btn-xs">
                              <i class="fa fa-pencil " id="edit-checklist-item-content"></i>
                            </button>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- Here ends showing of the checklist items content-->
              </ng-template>
            </ngb-panel>
          </div>
        </ngb-accordion>


        <!-- Here starts the MODAL that helps add new checklist items -->
        <form [formGroup]="checklistForm">
          <ng-template #modalValue let-c="close" let-d="dismiss">
            <div class="modal-header">
              <h4 class="modal-title">Add new checklist item!</h4>
              <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <div class="wrap">
                  <label for="inputVersion" class="col-sm-2 control-label">Checklist ID *</label>
                  <div class="col-sm-10">
                    <input required maxlength="120" formControlName="checklist_id" type="text" class="form-control"
                      id="inputVersion" />
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">e.g. 1.0, 1.1 etc</div>
                    </div>
                  </div>
                  <label for="inputVersion" class="col-sm-2 control-label">Checklist title *</label>
                  <div class="col-sm-10">
                    <input required formControlName="content" type="text" class="form-control"
                      id="inputVersion">
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">What is the title of the checklist item?</div>
                    </div>
                  </div>
                  <label for="inputVersion" class="col-sm-2 control-label">KB item *</label>
                  <div class="col-sm-10">
                    <ng-select [items]="knowledgebaseItems" bindLabel="title" placeholder="Select Item"
                      formControlName="kb_id" id="select-knowledge-base-item" name="KBitem">
                    </ng-select>
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">Select the knowledgebase item that correlates with this checklist item
                      </div>
                    </div>
                  </div>
                  <label for="inputVersion" class="col-sm-2 control-label">Questionnaire</label>
                  <div class="col-sm-10">
                    <ng-select [items]="questions" bindLabel="question" placeholder="Select Questionnaire"
                      formControlName="question_id" id="select-question-id" name="question">
                    </ng-select>
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">Correlate the checklist item with a sprint questionnaire</div>
                    </div>
                  </div>
                  <label for="inputVersion" class="col-sm-2 control-label">Include always *</label>
                  <div class="col-sm-10">
                    <select class="form-control" name="include_always" formControlName="include_always"
                      id="select-include-always">
                      <option selected [value]="selectUndefinedOptionValue">Include always?</option>
                      <option value="True">true</option>
                      <option value="False">false</option>
                    </select>
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">select to use this checklist in all the sprints</div>
                    </div>
                  </div>
                  <label for="cwe" class="col-sm-2 control-label">Maturity level</label>
                  <div class="col-sm-10">
                    <input required maxlength="120" formControlName="maturity" type="text" class="form-control">
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">e.g. 1,2,3</div>
                    </div>
                  </div>
                  <label for="cwe" class="col-sm-2 control-label">CWE</label>
                  <div class="col-sm-10">
                    <input required maxlength="120" formControlName="cwe" type="text" class="form-control" id="cwe"
                      name="cwe" placeholder="">
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">e.g. 713</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
              <button type="button" class="btn btn-success" (click)="storeChecklistItem();c('Close click')"
                id="insert-new-checklist-item">Insert</button>
            </div>
          </ng-template>
        </form>
        <!-- Here ends the modal that helps add new checklist items -->
      </div>
      <!-- /col-lg-4 -->
    </div>
    <!-- /row -->
  </section>
  <!--/wrapper -->
</section>
<!-- /MAIN CONTENT -->